import { defineComponent, ref, reactive, computed, watch, onMounted, onUpdated, onUnmounted } from 'vue'

export default defineComponent({
  name: 'CompositionApiDemo',
  setup() {
    // ref - 创建响应式数据
    const count = ref(0)
    const message = ref('Hello Vue 3!')
    
    // reactive - 创建响应式对象
    const state = reactive({
      name: 'Vue 3',
      version: '3.5.17',
      features: ['Composition API', 'Teleport', 'Fragments', 'Suspense']
    })
    
    // computed - 计算属性
    const doubledCount = computed(() => count.value * 2)
    const featureCount = computed(() => state.features.length)
    
    // 方法
    const increment = () => {
      count.value++
    }
    
    const decrement = () => {
      count.value--
    }
    
    const addFeature = (feature: string) => {
      state.features.push(feature)
    }
    
    const removeFeature = (index: number) => {
      state.features.splice(index, 1)
    }
    
    // watch - 监听器
    watch(count, (newCount, oldCount) => {
      console.log(`Count changed from ${oldCount} to ${newCount}`)
    })
    
    watch(
      () => state.name,
      (newName, oldName) => {
        console.log(`Name changed from ${oldName} to ${newName}`)
      }
    )
    
    // watchEffect - 立即执行的监听器
    // watchEffect(() => {
    //   console.log(`Count is ${count.value}`)
    // })
    
    // 生命周期钩子
    onMounted(() => {
      console.log('Component is mounted!')
    })
    
    onUpdated(() => {
      console.log('Component is updated!')
    })
    
    onUnmounted(() => {
      console.log('Component is unmounted!')
    })
    
    // 返回渲染函数
    return () => (
      <div class="composition-api-demo p-6 max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold mb-6 text-center">Vue 3 Composition API 演示</h1>
        
        {/* ref 和 reactive 示例 */}
        <div class="mb-8 p-4 border rounded-lg">
          <h2 class="text-xl font-semibold mb-4">响应式数据 (ref & reactive)</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-3 bg-blue-100 rounded">
              <p class="font-medium">Count (ref): {count.value}</p>
              <div class="mt-2 space-x-2">
                <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600" onClick={increment}>+1</button>
                <button class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600" onClick={decrement}>-1</button>
              </div>
            </div>
            
            <div class="p-3 bg-green-100 rounded">
              <p class="font-medium">Doubled Count (computed): {doubledCount.value}</p>
            </div>
            
            <div class="p-3 bg-purple-100 rounded">
              <p class="font-medium">Message (ref): {message.value}</p>
              <input 
                class="mt-2 p-2 border rounded w-full" 
                value={message.value} 
                onInput={(e) => message.value = (e.target as HTMLInputElement).value} 
                placeholder="修改消息内容"
              />
            </div>
            
            <div class="p-3 bg-yellow-100 rounded">
              <p class="font-medium">Framework: {state.name} v{state.version}</p>
            </div>
          </div>
        </div>
        
        {/* computed 示例 */}
        <div class="mb-8 p-4 border rounded-lg">
          <h2 class="text-xl font-semibold mb-4">计算属性 (computed)</h2>
          <div class="p-3 bg-indigo-100 rounded">
            <p>Vue 3 特性数量: {featureCount.value}</p>
          </div>
        </div>
        
        {/* 列表渲染和事件处理 */}
        <div class="mb-8 p-4 border rounded-lg">
          <h2 class="text-xl font-semibold mb-4">列表渲染和事件处理</h2>
          <div class="mb-4">
            <input 
              id="feature-input"
              class="p-2 border rounded mr-2" 
              placeholder="添加新特性" 
            />
            <button 
              class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600" 
              onClick={() => {
                const input = document.getElementById('feature-input') as HTMLInputElement
                if (input && input.value.trim()) {
                  addFeature(input.value.trim())
                  input.value = ''
                }
              }}
            >
              添加特性
            </button>
          </div>
          
          <ul class="list-disc pl-5 space-y-2">
            {state.features.map((feature, index) => (
              <li key={index} class="flex justify-between items-center p-2 hover:bg-gray-100 rounded">
                <span>{feature}</span>
                <button 
                  class="px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600" 
                  onClick={() => removeFeature(index)}
                >
                  删除
                </button>
              </li>
            ))}
          </ul>
        </div>
        
        {/* watch 示例 */}
        <div class="mb-8 p-4 border rounded-lg">
          <h2 class="text-xl font-semibold mb-4">监听器 (watch)</h2>
          <p class="text-gray-600">请打开浏览器控制台查看 watch 的输出信息</p>
          <p class="mt-2">当 count 或 name 发生变化时，控制台会显示相应的日志</p>
        </div>
        
        {/* 生命周期钩子 */}
        <div class="p-4 border rounded-lg">
          <h2 class="text-xl font-semibold mb-4">生命周期钩子</h2>
          <p class="text-gray-600">请打开浏览器控制台查看生命周期钩子的输出信息</p>
          <ul class="list-disc pl-5 mt-2 space-y-1">
            <li>onMounted: 组件挂载时触发</li>
            <li>onUpdated: 组件更新时触发</li>
            <li>onUnmounted: 组件卸载时触发</li>
          </ul>
        </div>
      </div>
    )
  }
})